import React, { Component } from 'react'
import Mock from "mockjs"
let data= Mock.mock({
    "list|5":[{
        "img":"@image(100x100,@color)"
    }]
})


export class Swiper extends Component {
    constructor(props){
        super(props)
        this.state={
            swiperlist:data.list,
            i:0,
        }
    }
  render() {
      let {swiperlist,i}=this.state
    return (
      <div className='swiper'>
          <ul>
              <li>{swiperlist.map((item,index)=>{
                  return <div key={index} className={index===i ? 'on' :'' }><img src={item.img}/></div>
                           
              })}</li>
          </ul>
          <ol>
              <li > {
                  swiperlist.map((item,index)=>{
                      return <p key={index} onClick={()=>{
                           this.setState({
                            i:index
      
                        })
                      }
                       
                    }></p>
                  })
              } </li>
          </ol>

      </div>
    )
  }
}

export default Swiper